<template>
  <view>
    <u-form class="item" style="padding: 0 20rpx 110rpx;" :model="ruleForm" ref="uform" :rules="rules"
            label-width="auto">
      <view v-if="type === 1">
        <u-form-item label="保险类型" borderBottom>
          <view style="display: flex;justify-content: flex-end">
            <text>{{ ruleForm.payInsuranceName }}</text>
          </view>
        </u-form-item>

        <u-form-item label="赔付保险公司" borderBottom @click="handleShow(1)">
          <u-input v-model="ruleForm.insuranceCompanyName" disabled disabledColor="#ffffff" border="none"
                   inputAlign="right" placeholder="请输入" type="select" :select-open="actionSheetShow"/>
          <u-icon slot="right" name="arrow-right"/>
        </u-form-item>

        <u-form-item label="保险赔付金额(元)" borderBottom prop="payFee">
          <u-input v-model="ruleForm.payFee" border="none" inputAlign="right"
                   placeholder="请输入"/>
        </u-form-item>

        <u-form-item label="赔付时间" borderBottom @click="pickerShow(1)">
          <u-input v-model="ruleForm.payDate" disabled disabledColor="#ffffff" border="none"
                   inputAlign="right" placeholder="请选赔付时间" type="select" :select-open="actionSheetShow"/>
          <u-icon slot="right" name="arrow-right"/>
        </u-form-item>

        <u-form-item label="备注信息" borderBottom>
          <u-input v-model="ruleForm.remark" border="none" inputAlign="right" placeholder="请输入"/>
        </u-form-item>
      </view>

      <view v-if="type === 2">
        <u-form-item label="费用类型" borderBottom>
          <view style="display: flex;justify-content: flex-end">
            <text>{{ ruleForm.feeName }}</text>
          </view>
        </u-form-item>

        <u-form-item label="应收金额(元)" borderBottom prop="receivableAmount">
          <u-input  v-model="ruleForm.receivableAmount" border="none" inputAlign="right"
                   placeholder="请输入"/>
        </u-form-item>

        <u-form-item label="付款对象" borderBottom @click="handleShow(2)">
          <u-input v-model="ruleForm.receivableObjName" disabled disabledColor="#ffffff" border="none"
                   inputAlign="right" placeholder="请输入" type="select" :select-open="actionSheetShow"/>
          <u-icon slot="right" name="arrow-right"/>
        </u-form-item>

        <u-form-item label="生成应收账单" borderBottom>
          <view v-if="bool" style="display: flex;justify-content: flex-end">
            <u-switch v-model="ruleForm.isGenerateReceivableBill" :active-value="1" :inactive-value="0" size="20"/>
          </view>
          <text v-else>{{ ruleForm.isGenerateReceivableBill === 0 ? '否' : '是' }}</text>
        </u-form-item>

        <u-form-item label="应付金额(元)" borderBottom prop="payableAmount">
          <u-input v-if="bool" v-model="ruleForm.payableAmount" border="none" inputAlign="right" placeholder="请输入"/>
          <text v-else>{{ ruleForm.payableAmount }}</text>
        </u-form-item>

        <u-form-item label="收款对象" borderBottom>
          <u-input v-if="bool" v-model="ruleForm.paymentObjName" border="none" inputAlign="right" placeholder="请输入"/>
          <text v-else>{{ ruleForm.paymentObjName }}</text>
        </u-form-item>

        <u-form-item label="生成应付账单" borderBottom>
          <view v-if="bool" style="display: flex;justify-content: flex-end">
            <u-switch v-model="ruleForm.isGeneratePayableBill" :active-value="1" :inactive-value="0" size="20"/>
          </view>
          <text v-else>{{ ruleForm.isGeneratePayableBill === 0 ? '否' : '是' }}</text>
        </u-form-item>
      </view>


      <u-form-item borderBottom>
        <text style="text-align: right;color: red" @click="handleDele">删除</text>
      </u-form-item>


    </u-form>

    <u-datetime-picker
        v-model="valueTime" :show="showTime" mode="date" @confirm="confirmTime" @cancel="showTime=false">
    </u-datetime-picker>

    <u-picker :show="payShow" :columns="columnsListPay" keyName="companyName"
              @confirm="payeeConfimPay" @cancel="payShow=false"/>

    <u-picker :show="payeeShow" :columns="columnsList" keyName="customerName"
              @confirm="payeeConfim" @cancel="payeeShow=false"/>
  </view>
</template>

<script>
export default {
  name: 'collapsePage',
  props: {
    value: {
      type: Object,
      default: {}
    },
    type: {
      type: Number,
      default: 0
    },
    bool: {
      type: Boolean,
      default: true
    },
    payInsuranceList:{
      type: Array,
      default: []
    },
    payeeList:{
      type: Array,
      default: []
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    }
  },
  watch: {},
  data() {
    return {
      showTime: false,
      valueTime: '',
      typeTime: '',
      rules: {
        payFee:[
          {
            validator: (rule, value, callback) => {
              return   /^(?:[1-9]\d*|0)(?:\.\d{0,2})?$/.test(value);
            },
            message: '请输入整数或者保留两位小数',
            trigger: ['change', 'blur'],
          }
        ],
        receivableAmount:[
          {
            validator: (rule, value, callback) => {
              return   /^(?:[1-9]\d*|0)(?:\.\d{0,2})?$/.test(value);
            },
            message: '请输入整数或者保留两位小数',
            trigger: ['change', 'blur'],
          }
        ],
        payableAmount:[
          {
            validator: (rule, value, callback) => {
              return   /^(?:[1-9]\d*|0)(?:\.\d{0,2})?$/.test(value);
            },
            message: '请输入整数或者保留两位小数',
            trigger: ['change', 'blur'],
          }
        ]
      },
      payeeShow: false,
      columnsList: [],
      payShow:false,
      columnsListPay:[]
    };
  },
  created() {
  },
  mounted() {
    this.columnsListPay = [this.payInsuranceList]
    this.columnsList = [this.payeeList]
  },
  methods: {
    handleShow(val) {
      if(val === 1){
        this.payShow = true
      }
      if(val === 2){
        this.payeeShow = true
      }

    },

    payeeConfimPay(val){
      this.value.insuranceCompanyName = this.ruleForm.insuranceCompanyName = val.value[0].companyName
      this.payShow = false
    },

    payeeConfim(val) {
      this.value.receivableObjName = this.ruleForm.receivableObjName = val.value[0].customerName
      this.payeeShow = false
    },

    handleDele() {
      this.$emit('delete')
    },

    pickerShow(type) {
      this.showTime = true;
      this.typeTime = type;
    },

    confirmTime(e) {
      let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
      if (this.typeTime === 1) {
        this.value.payDate = this.ruleForm.payDate = timeStr;
      }
      if (this.typeTime === 2) {
        this.value.payTime = this.ruleForm.payTime = timeStr;
      }
      this.showTime = false;
    }
  },
};
</script>

<style scoped lang=""></style>


